<script setup lang="ts">
import { useRoute,useRouter } from 'vue-router';
import { numberFn } from '@/api/detail';
import { ref } from 'vue';
import { onMounted } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
import { onUnmounted } from 'vue';
const route =useRoute()
let number =ref('')
let map:any = null;
numberFn().then(res=>{
    console.log(res.data);
    
    number.value=res.data
})
const unpaly =ref(JSON.parse(localStorage.getItem("unpalys"))||[])
const lessuse = Number(route.query.nprice)-17
const usermessage =JSON.parse(localStorage.getItem('usermessage')||'')
console.log(usermessage);

const code =usermessage.token
const name =usermessage.name
const tel =usermessage.tel
const location =usermessage.location
onMounted(() => {
  console.log(window);

  
  window._AMapSecurityConfig = {
    securityJsCode: "	b4fcdcfe65e7f8941e28c7d6066f60ed」",
  };
  AMapLoader.load({
    key: "	8efc5dd3fe5f1d04a6c7e72b4528a755", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
      });
    })
    .catch((e) => {
      console.log(e);
    });
});
onUnmounted(() => {
  map?.destroy();
});
const router =useRouter()
function backClick(){
    router.go(-1);
}
function cancelClick(){
    const falses =ref(JSON.parse(localStorage.getItem("false"))||[])
    console.log(false);
    
    const arr={
        kind:  route.query.kind,
        proid:route.query.proid,
        img:route.query.img,
        bed:route.query.bed,
        year:route.query.year,
        month:route.query.month,
        day:route.query.day,
        hour:route.query.hour,
        min:route.query.min,
        sec:route.query.sec,
        price:route.query.price
    }
    console.log(falses.value);
    
    falses.value.push(arr)
    for (let i = 0; i < unpaly.value.length; i++) {
       if(unpaly.value[i].proid==falses.value.proid){
        unpaly.value.splice(i,1)
       }
      
    }
    localStorage.setItem("unpaly",JSON.stringify(unpaly.value))
    localStorage.setItem("false",JSON.stringify(falses.value))
    console.log(falses.value);
    
    router.push(   {
     name: 'step5',
        query: {
            year:route.query.year,
       month:route.query.month,
       day:route.query.day,
       hour:route.query.hour,
       min:route.query.min,
       sec:route.query.sec,
       nmonth:route.query.nmonth,
       nday:route.query.nday,
       bed:  route.query.bed,
       kind:  route.query.kind,
       price:  route.query.price,
       start: route.query.start,
       img:route.query.img,
       phone:route.query.phone,
       name:route.query.name,
       nprice:route.query.nprice,
       fprice:lessuse,
       number:number.value
        }
})
}
function returnClick(){
    const success =ref(JSON.parse(localStorage.getItem("success"))||[])
    console.log(success);
    
    const arr={
        kind:  route.query.kind,
        bed:route.query.bed,
        year:route.query.year,
        month:route.query.month,
        img:route.query.img,
        day:route.query.day,
        hour:route.query.hour,
        min:route.query.min,
        sec:route.query.sec,
        price:route.query.price
    }
    console.log(success.value);
    for (let i = 0; i < unpaly.value.length; i++) {
       if(unpaly.value[i].proid==success.value.proid){
        unpaly.value.splice(i,1)
       }
      
    }
    localStorage.setItem("unpaly",JSON.stringify(unpaly.value))
    success.value.push(arr)
    localStorage.setItem("success",JSON.stringify(success.value))
    console.log(success.value);
    
    router.push(   {
     name: 'detail',
        query: {
          bed:  route.query.bed,
          kind:  route.query.kind,
          price:  route.query.price,
          start: route.query.start,
          img:route.query.img
        }
})
}
</script>
<template>
    <main class="box">
    <div class="content"> 
        <div class="toptitle">
    <van-icon @click="backClick()" class="back" size="50" name="arrow-left" />
    <div class="pay">订单详情</div>
   </div>
   <div class="number"><div class="ntitle">订单号</div><div class="num">{{number}}</div><div class="delay"> 待酒店确认 </div></div>
   <div class="mapbox"><div class="maptitle">君假酒店（千山城规站店</div>
   <div class="maptime"><div class="enter">入住：{{route.query.month }}月{{ route.query.day }}日</div> <div class="enter">共一晚</div><div class="enter">离开：{{route.query.nmonth}}月{{route.query.nday}}日</div></div>
   <div id="container"></div>
   <div class="location">
    <van-icon size="30" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u282.svg" />
    <div class="locationdetail">{{ route.query.kind }}香洲区前山街道123号</div></div>
</div>
    <div class="peoplemessage">
    <div>入住人:{{route.query.name  }}</div>
    <div>联系手机:{{route.query.phone  }}</div>
    </div>
    
   
    <div class="invoice">
    <div class="invoicetitle">发票信息</div>
    <div class="invoicedetail"><div class="detailtitle">发票明细</div><div class="money">订房费</div><div class="monenum">80元</div></div>
    <div class="invoiceconpany"><div class="conpany">发票公司</div><div class="conpanyd">{{route.query.kind}}嘻嘻哈哈股份有限公司</div></div>
    <div class="code">
        <div class="codetitle">纳税人识别号</div>
        <div class="token">{{ code.token }}</div>
    </div>
    <div class="sendmessage">
    <div class="sendmessagetitle">房主信息</div>
    <div class="sendname">{{ name }}</div>
    <div class="sendtel">{{ tel }}</div>
    <div class="sendlocation">{{ location }}</div>
    </div>
    </div>
    <div class="payway">
        <div class="paywaytitle">支付方式</div>
        <div class="onlinepay">在线支付</div>
        <div class="dash"></div>
        <div class="roomvalue">房间费</div>
        <div class="roommoney">￥{{ route.query.nprice }}.0</div>
        <div class="useless">优惠</div>
        <div class="uselessvalue">-￥17.0</div>
        <div class="totalmoney">实付款：<span>￥{{ lessuse }}</span></div>
        <div class="buytime">下单时间:{{ route.query.year }}-{{ route.query.month }}-{{ route.query.day }}&nbsp;{{ route.query.hour }}:{{ route.query.min }}:{{ route.query.sec }}</div>
        <div class="buttonbox"><van-button @click="cancelClick" type="primary">取消订单</van-button> <van-button @click="returnClick" plain type="primary">再次预订</van-button></div>
    </div>
  
    </div>
    </main>
</template>

<style lang="scss" scoped>
main,.box,.content{
    width: 100%;
    height: 100%;
    background-color: #fbfbfb;
}
.toptitle{
    width: 100%;
    height: 0.5rem;
    position: relative;
    .bacK{
        position: absolute;
        top: 5px;
        left: 10px;
    }
    .pay{
        font-size: 20px;
        position: absolute;
        top: 15px;
        left:calc(50% - 35px);
    }
}
.number{
    width: 98%;
    height: 0.5rem;
    margin: 10px auto;
    background-color: white;
    position: relative;
    .ntitle{
        font-size: 18px;
        position: absolute;
        left: 10px;
        top: 16px;
    }
    .num{
        font-size: 18px;
        position: absolute;
        left: 120px;
        top: 16px;
    }
    .delay{
        font-size: 18px;
        color: red;
        position: absolute;
        right:  10px;
        top: 16px;
    }
}
.mapbox{
    width: 90%;
    height: 3.4rem;
    background-color: white;
    margin: 20px auto;
   
   .maptitle{
    font-size: 20px;
    width: 100%;
    padding-top: 10px;
    text-align: center;
   }
   .maptime{
    width: 90%;
    height: 24px;

    margin: 30px auto 10px;
    display: flex;
    justify-content: space-between;
    .enter{
        font-size: 18px;
    }
   }
   #container{
    width: 90%;
    height: 2rem;
    margin:  10px auto;
}
.location{
    width: 98%;
    height: 30px;

   
    position: relative;
    left: 20px;
    .locationdetail{
        font-size: 16px;
        position: absolute;
        top:8px;
        left: 40px;
    }

}
}
.peoplemessage{
    width: 90%;
    height: 0.5rem;
    background-color:white;
    margin: 20px auto;
    div{
        font-size: 18px;
        padding: 5px;
    }
}
.invoice{
    width: 98%;
    height: 2.5rem;
    background-color: white;
    position: relative;
    .invoicetitle{
        position: absolute;
        font-size: 18px;
        top: 10px;
        left: 20px;
    }
    .invoicedetail{
        position: absolute;
        font-size: 16px;
        top: 40px;
        left: 20px;
        .detailtitle{
            position: absolute;
            width: 100px;
            left: 0px;
            top: 5px;
        }
        .money{
            position: absolute;
            width: 100px;
            left: 100px;
            top: 5px;
        }
        .monenum{
            position: absolute;
            width: 100px;
            left: 180px;
            top: 5px;
        }
    }
    .invoiceconpany{
        position: absolute;
        font-size: 16px;
        top: 80px;
        left: 20px;
        .conpany{
            position: absolute;
            width: 100px;
            left: 0px;
            top: 5px;
        }
        .conpanyd{
            position: absolute;
            width: 220px;
            left: 100px;
            top: 5px;
        }
    }
    .code{
        position: absolute;
        font-size: 16px;
        top: 120px;
        left: 20px;
        .codetitle{
            position: absolute;
            width: 100px;
            left: 0px;
            top: 13px;
        }
        .token{
            position: absolute;
            width: 220px;
            left: 100px;
            top: 5px;
        }
    }
    .sendmessage{
        position: absolute;
        font-size: 16px;
        top: 170px;
        left: 20px;
        .sendmessagetitle{
            position: absolute;
            width: 100px;
            left: 0px;
            top: 5px;
        }
        .sendname{
            position: absolute;
            width: 100px;
            left: 100px;
            top: 5px;
        }
        .sendtel{
            position: absolute;
            width: 100px;
            left: 170px;
            top: 5px;
        }
        .sendlocation{
            position: absolute;
            width: 100px;
            left: 100px;
            top: 40px;
        }
    }
}
.payway{
    width: 100%;
    height: 3.4rem;
    background-color: aqua;
    position: relative;
    .paywaytitle{
        font-size: 20px;
        position: absolute;
        left: 30px;
        top: 20px;
    }
    .onlinepay{
        font-size: 20px;
        position: absolute;
        right: 40px;
        top: 20px;
    }
    .dash{
        width: 100%;
        border: 1px dashed;
        position: absolute;
        left: 0;
        top: 80px;
    }
    .roomvalue{
        font-size: 18px;
        position: absolute;
        left: 40px;
        top: 120px;
    }
    .roommoney{
        font-size: 18px;
        position: absolute;
        right: 40px;
        top: 120px;
    }
    .useless{
        font-size: 18px;
        position: absolute;
        left: 40px;
        top: 160px;
    }
    .uselessvalue{
        font-size: 18px;
        position: absolute;
        color: red;
        right: 40px;
        top: 160px;
    }
    .totalmoney{
        font-size: 21px;
        position: absolute;
        right: 40px;
        top: 220px;
        span{
            color: red;
        }
    }
    .buytime{
        font-size: 18px;
        position: absolute;
        right: 40px;
        top: 256px;
    }
   .buttonbox{
    width: 90%;
  display: flex;
  justify-content:space-around ;
  position: absolute;
  left: 5%;
  top: 310px;
   }
}
</style>
    